<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-login">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="/static/img/b-1.png"></image>
		<image class="img-b" src="/static/img/b-2.png"></image>
		<!-- 标题 -->
		<view class="t-b">{{ title }}</view>
		<view class="t-b2">{{ subTitle }}</view>
		<form class="cl">
			<!-- 登录账号 -->
			<view class="login-form-item">
				<u-input v-model="username" placeholder="请输入登录用户名" maxlength="30">
					<u-icon slot="prefix" name="account" size="35px"></u-icon>
				</u-input>
			</view>
			<!-- 登录密码 -->
			<view class="login-form-item">
				<u-input v-model="password" type="password" placeholder="请输入登录密码" maxlength="16">
					<u-icon slot="prefix" name="lock" size="35px"></u-icon>
				</u-input>
			</view>
			<!-- 图形验证码 -->
			<view class="login-form-item t-captcha">
				<u-input v-model="captchaCode" type="number" placeholder="请输入验证码" maxlength="4">
					<u-icon slot="prefix" name="fingerprint" size="35px"></u-icon>
				</u-input>
				<image :src="captcha" @click="getCaptcha" class="t-captcha-img"></image>
			</view>
			<!-- 记住密码功能 -->
			<view class="login-form-item" style="padding-left: 10rpx;">
				<checkbox-group @change="checkboxChange">
					<checkbox  id="chkRem" type="checkbox"  :checked='rememberPsw' @tap="rememberPsw =! rememberPsw" color="#09CC86"/>
					 记住账号密码
				</checkbox-group>
			</view>
			<br>
			<button @tap="login()">登 录</button>
		</form>
	</view>
</template>
<script>
import * as CaptchaApi from '@/api/captcha'
import { isEmpty } from '@/utils/verify.js'

export default {
	data() {
		return {
			title: '素奥运输管理平台',
			subTitle: '欢迎使用本系统！',
			// 图形验证码信息
			captcha: null,
			// 登录账号
			username: '',
			// 密码
			password: '',
			// 图形验证码
			captchaCode: '',
			uuid: '',
			rememberPsw: true,//复选框状态 默认勾选
		};
	},
	mounted() {//记住密码
		//缓存的账号
		const HBusername = uni.getStorageSync('HBusername');
		//缓存的密码
		const HBpassword = uni.getStorageSync('HBpassword');
		console.log("缓存的账号:"+HBusername)
		console.log("缓存的密码:"+HBpassword)
				//有缓存就赋值给文本没有就清空
		if (HBusername && HBpassword) {
			this.username = HBusername;
			this.password = HBpassword;
		} else {
			this.username = '';
			this.password = '';
		}
		//自动登录
	},
	created() {
	  // 获取图形验证码
	  this.getCaptcha()
	},
	methods: {
		//复选框
		checkboxChange: function(e) {
			console.log("复选框状态:"+e.detail.value.length);
			if (e.detail.value.length == 1) {
				//获取缓存的账号 赋值
				uni.getStorageSync('HBusername',this.username);
				uni.getStorageSync('HBpassword',this.password);
			} else {//销毁
				uni.removeStorageSync('HBusername');
				uni.removeStorageSync('HBpassword');              
			}
		},
		// 获取图形验证码
		getCaptcha() {
			const app = this
			CaptchaApi.image().then(result => {
				app.captcha = 'data:image/gif;base64,' + result.img
				app.uuid = result.uuid
			})
		},
		// 验证表单内容
		validItem() {
			const app = this
			if (isEmpty(app.username)) {
				uni.$u.toast('请输入登录用户名')
				return false
			}
			if (isEmpty(app.password)) {
				uni.$u.toast('请输入登录密码')
				return false
			}
			if (isEmpty(app.captchaCode)) {
				uni.$u.toast('请输入验证码')
				return false
			}
			return true
		},
		// 确认登录
	login() {
		const app = this
			let valid = app.validItem();
			if (valid) {
				app.isLoading = true
				app.$store.dispatch('Login', {
				  username: app.username,
				  password: app.password,
				  code: app.captchaCode,
				  uuid: app.uuid
				}).then(result => {
					//勾选就缓存账号和密码
					if (this.rememberPsw) {
						uni.setStorageSync('HBusername', this.username);
						uni.setStorageSync('HBpassword', this.password);
					} else {//销毁缓存
						uni.removeStorageSync('HBusername');
						uni.removeStorageSync('HBpassword');
					}
					uni.switchTab({
						url: '/pages/index/index',
						fail(err) {
							console.log(err)
						}
					})
				})
				.catch(err => {
					app.captchaCode = ''
					app.getCaptcha()
				})
				.finally(() => app.isLoading = false)
			}
		},
	}
};
</script>
<style lang="scss" scoped>
@import 'index.scss';
</style>
